<template>
  <div class="app-container">
    <zl-table ref="table" url="/message/template/list" :param.sync="par">
      <template slot="search">
        <el-form :inline="true" :model="par" class="left">
          <el-form-item label="模板分类">
            <el-select v-model="par.catalog" placeholder="请选择" clearable>
              <el-option v-for="item in catalogs" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="模板名称">
            <el-input v-model="par.name" clearable placeholder="请输入" />
          </el-form-item>
          <el-form-item label="模板编码">
            <el-input v-model="par.code" clearable placeholder="请输入" />
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="par.title" clearable placeholder="请输入" />
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" size="small" @click="query">搜 索</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template slot="toolbar">
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-button size="small" plain type="primary" icon="el-icon-plus" @click="addTemplate">新 增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button size="small" plain type="danger" icon="el-icon-delete" @click="deleteTemplate">删 除</el-button>
          </el-col>
        </el-row>
      </template>
      <template slot="cols">
        <el-table-column align="center" width="50px" type="index" :index="indexMethod" />
        <el-table-column align="center" type="selection" width="50"/>
        <el-table-column width="200px" prop="name" label="模板名称" align="center" show-overflow-tooltip sortable="custom"/>
        <el-table-column width="150px" prop="code" label="模板代码" show-overflow-tooltip align="center" sortable="custom"/>
        <el-table-column width="150px" prop="catalog" label="模板分类" show-overflow-tooltip align="center" sortable="custom"/>
        <el-table-column prop="sendMode" label="发送方式" align="center" width="120px" show-overflow-tooltip sortable="custom">
          <template slot-scope="scope">
            {{ messageTypeMap[scope.row.sendMode] }}
          </template>
        </el-table-column>
        <el-table-column min-width="250px" prop="title" label="标题" show-overflow-tooltip sortable="custom"/>

        <el-table-column prop="effect" label="接收人" align="center" width="220px" show-overflow-tooltip>
          <template slot-scope="scope">
            <template v-for="(o,i) in scope.row.receiverList">
              <el-tag v-if="o.orgType ===1" type="warning" :key="i">{{ o.orgName }}</el-tag>
              <el-tag v-else-if="o.orgType ===2" :key="i">{{ o.orgName }}</el-tag>
              <el-tag v-else-if="o.orgType ===3" type="danger" :key="i">{{ o.orgName }}</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="100px">
          <template slot-scope="scope">
            <el-button
              title="编辑"
              type="primary"
              circle
              plain
              class="el-icon-edit"
              size="mini"
              @click.native.prevent="editRow(scope.$index, scope.row)"
            />
          </template>
        </el-table-column>
      </template>
    </zl-table>
    <el-dialog :title="title" :visible.sync="show" :append-to-body="true" :close-on-click-modal="false" width="800px">
      <el-form ref="editForm" :model="form" :rules="rules" :label-width="labelWidth">
        <el-row>
          <el-col :span="12">
            <el-form-item label="模板名称" prop="name" class="is-required">
              <el-input v-model="form.name" clearable autocomplete="off" maxlength="50" placeholder="请输入模板名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模板代码" prop="code" class="is-required">
              <el-input v-model="form.code" clearable autocomplete="off" maxlength="50" placeholder="请输入模板代码"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="模板分类" prop="catalog">
              <el-input v-model="form.catalog" clearable autocomplete="off" maxlength="50" placeholder="请输入模板分类"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标题" prop="title" class="is-required">
              <el-input v-model="form.title" clearable autocomplete="off" maxlength="50" placeholder="请输入标题"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="消息类型" prop="sendMode">
          <el-radio-group v-model="form.sendMode">
            <el-radio :label="0">内部消息</el-radio>
            <el-radio :label="1">邮件</el-radio>
            <el-radio :label="2" disabled="">三方消息</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="消息重要度" prop="level">
          <el-radio-group v-model="form.level">
            <el-radio :label="0">普通</el-radio>
            <el-radio :label="1">紧急</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="内部消息模板" prop="content">
          <el-input
            v-model="form.content"
            type="textarea"
            :autosize="{minRows:3,maxRows:4}"
            clearable
            autocomplete="off"
            placeholder="请输入内容"
            maxlength="50"
          />
        </el-form-item>
        <el-form-item label="邮件模板" prop="mailContent">
          <div style="max-height: 300px;overflow-y: auto">
            <Editor v-if="show" id="editEditor" ref="editEditor" :value="form.mailContent" :minHeight="150" @on-change="onChange"/>
          </div>
        </el-form-item>
        <el-form-item label="接收人" prop="receivers">
          <el-tag
            v-for="(o,i) in fullOrg.parent"
            :key="i"
            :type="orgTypeColorMap[o.orgType]"
            closable
            class="inline-block m5"
            @close="fullOrg.parent.splice(i, 1)"
          >{{ o.orgName }}</el-tag>
          <el-divider v-if="fullOrg.parent.length > 0" direction="vertical" />
          <el-button size="small" icon="el-icon-plus" @click="fullOrg.showOrgTag = true">选择</el-button>
          <el-button v-show="fullOrg.parent.length > 1" size="small" icon="el-icon-close" @click="fullOrg.parent = []">清空</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" :loading="loading" @click="saveTemplate">保 存</el-button>
        <el-button size="small" @click="show = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="选择组织结构"
      :visible.sync="fullOrg.showOrgTag"
      :append-to-body="true"
      :close-on-click-modal="false"
      width="800px"
      destroy-on-close
      @open="openTag"
    >
      <component :is="orgTag" ref="tag" :multi="true" />
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="addTag">确 定</el-button>
        <el-button size="small" @click="fullOrg.showOrgTag = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { fastNotBlank} from '@/utils/form'
import ZlTable from '@/components/table/table-con'
import { deleteMessageTemplate, messageTemplateCatalog, saveMessageTemplate } from '@/api/message'
import { Mixin } from '@/utils/mixin'
export default {
  name: 'MessageTemplate',
  mixins: [Mixin],
  components: { ZlTable },
  data() {
    return {
      par: {
        catalog: '',
        code: '',
        title: '',
        name: ''
      },
      catalogs: [],
      form: {
        id: '', name: '', title: '', content: '', mailContent: '', content3: '', sendMode: 0, level: 0,orgIds: [],receiverList: []
      },
      fullOrg: {
        parent: [],
        showOrgTag: false,
        loading: false
      },
      title: '修改消息模板',
      loading: false,
      show: false,
      labelWidth: '120px'
    }
  },
  computed: {
    orgTag() {
      return require('/src/components/tag/full-tag').default
    },
    rules() {
      return {
        name: [fastNotBlank('模板名称不能为空')],
        code: [fastNotBlank('模板代码不能为空')],
        title: [fastNotBlank('标题不能为空')],
      }
    }
  },
  mounted() {
    messageTemplateCatalog().then((r) => {
      this.catalogs = r.data
    })
  },
  methods: {
    saveTemplate() {
      this.$refs.editForm.validate(r => {
        if (r) {
          this.loading = true
          saveMessageTemplate(this.form).then((r) => {
            this.$message.success('保存成功')
            this.loading = false
            this.show = false
            this.query()
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    deleteTemplate() {
      const l = this.$refs.table.getSelected()
      if (l.length === 0) {
        this.$message.warning('请选择消息模板')
        return
      }
      this.$confirm('确定要删除选中的消息模板吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }).then(() => {
        deleteMessageTemplate(l.map(o=>o.id)).then((r)=>{
          this.$message.success('删除成功')
          this.query()
        })
      })
    },
    addTemplate() {
      this.title = '新增消息模板'
      this.show = true
      this.form = {orgIds: []}
      this.$nextTick(() => {
        this.fullOrg.parent = []
        this.form.orgIds = []
        this.$refs.editForm.clearValidate()
      })
    },
    editRow(index, row) {
      this.title = '修改消息模板'
      console.log(row)
      this.form = this.$util.copy(row)
      this.fullOrg.parent = this.form.receiverList || []
      this.form.orgIds = this.fullOrg.parent.map(o => o.orgId)
      this.show = true
      this.$nextTick(() => {
        this.$refs.editForm.clearValidate()
      })
    },
    addTag() {
      const p = this.$refs.tag.get()
      if (p.length === 0) {
        this.$message.warning('请选择组织结构')
        return
      }
      // 去重
      const ids = []
      const parent = this.fullOrg.parent
      for (let i = 0; i < parent.length; i++) {
        ids.push(parent[i].orgId)
      }
      for (let i = 0; i < p.length; i++) {
        if (ids.indexOf(p[i].orgId) === -1) {
          parent.push(p[i])
        }
      }
      this.fullOrg.showOrgTag = false
      this.form.orgIds = parent.map(o=>o.orgId)
    },
    openTag() {
      this.$nextTick(() => {
        // this.$refs.tag.clear()
        this.$refs.tag.query()
      })
    },
    onChange(o) {
      console.log('onChange')
      this.form.mailContent = o.html
    },
    query() {
      this.$refs.table.query()
    },
    indexMethod(index) {
      return (this.$refs.table.pageNum - 1) * this.$refs.table.pageSize + index + 1
    }
  }
}
</script>
<style scoped>

</style>
